<template>
  <div v-loading="loading" class="dashboard-container">
    <div class="app-container">
      <el-card class="tree-card">
        <!-- 组织架构头部 -->
        <tree-tools :tree-node="company" :is-root="true" @addDepts="addDepts" />
        <!-- 树状图 -->
        <el-tree :data="departs" :props="defaultProps">
          <!-- 作用域插槽 slot-scope="obj" 接收传递给插槽的数据   data 每个节点的数据对象-->
          <tree-tools slot-scope="{data}" :tree-node="data" @delDepts="getDepartments" @addDepts="addDepts" @editDepts="editDepts" />
        </el-tree>
      </el-card>
    </div>
    <!-- dialog弹框 -->
    <addDept ref="addDept" :visible.sync="showDialog" :tree-node="node" @addDepts="getDepartments" />
  </div>
</template>

<script>
import treeTools from '@/views/departments/components/tree-tools'
import addDept from '@/views/departments/components/add-dept'
import { getDepartments } from '@/api/departments'
import { tranListToTreeData } from '@/utils/index'
export default {
  components: {
    treeTools,
    addDept
  },
  data() {
    return {
      company: { name: '江苏传智播客教育科技股份有限公司', manager: '负责人' },
      defaultProps: {
        // label	指定节点标签为节点对象的某个属性值
        label: 'name'
      },
      departs: [
        { name: '总裁办', manager: '蔡徐坤', children: [{ name: '董事会', manager: '丁真' }] },
        { name: '行政部', manager: '陈立农' },
        { name: '人事部', manager: '范丞丞', children: [{ name: '人事部' }] },
        { name: '财务部', manager: '黄明昊', children: [{ name: '财务核算部' }, { name: '税务管理部' }, { name: '薪资管理部' }] },
        { name: '技术部', manager: '林彦俊', children: [{ name: 'Java' }, { name: '前端' }, { name: 'PHP' }] },
        { name: '运营部', manager: '朱正廷' },
        { name: '市场部', manager: '王子异', children: [{ name: '北京事业部' }, { name: '上海事业部', children: [{ name: '分部' }] }] }
      ],
      showDialog: false,
      node: {},
      loading: false // 用来控制进度弹层的显示和隐藏
    }
  },
  created() {
    // 在钩子函数中调用方法
    this.getDepartments()
  },
  methods: {
    // 编辑
    editDepts(treeNode) {
      this.showDialog = true
      this.node = treeNode
      this.$refs.addDept.getDepartDetail(treeNode.id)
    },
    addDepts(treeNode) {
      this.showDialog = true
      this.node = treeNode
    },
    // 获取组织架构列表
    async getDepartments() {
      // loading开启
      this.loading = true
      const { depts, companyName } = await getDepartments()
      // console.log(tranListToTreeData(res.depts, ''))
      this.company = { name: companyName, manager: '负责人', id: '' }
      this.departs = [...tranListToTreeData(depts, '')]
      // loading关闭
      this.loading = false
    }
  }
}
</script>

<style lang='scss' scoped>
.tree-card {
  padding: 30px  140px;
  font-size:14px;
}
</style>
